.registration,
.forgot,
.confirmation,
#sign_in
  @include devise-box

#new_session
  .checkbox
    display: block
    clear: both
    float: none
    label
      color: $gray !important
  .remember_password
    font-size: 12px
    a
      color: $gray !important
      &:hover
        color: $gray-dark !important
  hr
    margin-top: 20px !important
    margin-bottom: 15px !important
  .new_session
    padding: 17px 0px 7px !important
  input
    &[type="submit"]
      margin-top: -23px

#nav-collapse-out
  .dropdown a
    color: $white
.registration
  hr
    border: 1px solid $gray-lighter
  ul.tag-list
    margin-left: 0
  .conditions
    font-size: 0.9em
    label
      color: $gray !important
.simple_captcha
  width: 100%
  float: left
  margin-top: 7px
  margin-bottom: 20px
  .simple_captcha_image
    width: 40%
    display: block
    float: left
  .simple_captcha_field
    width: 50%
    display: block
    float: left
    margin-left: 15px

.dropdown-log
  width: 242px
  form#new_user
    @include dropdown-log


/*FRONTPAGE*/
#head_front
  position: relative
  .vish_logo_center
    width: 400px
    @include center-block()
    margin-top: -70px
    position: relative
    z-index: 666
    @media (max-width: 500px)
      width: 79%
      margin-top: -14%
    img
      width: 100%
    hr
      border: 1px solid #999
      margin: 5px 0
      border-bottom: none
    h1
      margin-top: 0px
      text-align: center
      font-family: $corporate-font-family-sans-serif-Light
      font-size: 20px
      line-height: 24px

  .ilustration
    position: relative
    //margin-top: 50px
    width: 100%
    overflow: hidden
    margin-top: -20px

    &:before
      content: ""
      display: block
      padding-top: 32%
    .vish_ilustration
      position:  absolute
      top: 0
      left: 0
      bottom: 0
      right: 0
      .vishphoto
        z-index: 1
        width: 100%
      .vishphoto_mobile
        display: none
      .gradient1
        z-index: 2
        position:  absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: rgba(0,124,200,0.6)
      .tree
        z-index: 5
        width: 32%
        position: absolute
        left: 50%
        bottom: 0
        margin-left: -16%
        height: auto
        display: block

#frontpage
  @include make-sm-column(12, $gutter: $grid-gutter-width)
  @include make-md-column(12, $gutter: $grid-gutter-width)
  @include make-lg-column(12, $gutter: $grid-gutter-width)
  .competition
    display: block
    img
      width: 100%
  .decoration
    margin-bottom: 25px
    @media (max-width: $screen-xs-max)
      margin-bottom: 36px
    hr
      border-bottom: 2px solid $gray-light
      width: 100%
      display: inline-block
      margin: 0
      border-top: 0
    i
      width: 100%
      text-align: center
      display: inline-block
      margin: -12px 0 0 0
      float: left
      position: relative
      color: $gray-light

#presentation
  margin-bottom: 10px
  margin-top: -30px
  float: left
  @media (max-width: $screen-xs-max)
    margin: 25px 0
.front_info
  .ch-grid
    margin: 0
    padding: 0
    list-style: none
    display: block
    text-align: center
    @include make-xs-column(12, $gutter: $grid-gutter-width)
    @include make-sm-column(4, $gutter: $grid-gutter-width)
    @include make-md-column(4, $gutter: $grid-gutter-width)
    @include make-lg-column(4, $gutter: $grid-gutter-width)
    h2
      width: 80%
      display: block
      font-family: $corporate-font-family-sans-serif-Regular
      margin: 0 auto 5px
      color: $gray-dark
    p
      display: block
      padding: 0 15px
      margin: 0 auto
      width: 80%
      font-family: $corporate-font-family-sans-serif-Light
      @media (max-width: $screen-xs-max)
      width: 100%

  .ch-grid li
    width: 120px
    height: 120px
    display: inline-block

  .ch-item
    width: 100%
    height: 100%
    border-radius: 50%
    position: relative
    box-shadow: 0 1px 2px rgba(0,0,0,0.1)
    cursor: default

  .ch-info-wrap
    position: absolute
    width: 100px
    height: 100px
    border-radius: 50%

    -webkit-perspective: 800px
    -moz-perspective: 800px
    -o-perspective: 800px
    -ms-perspective: 800px
    perspective: 800px

    -webkit-transition: all 0.4s ease-in-out
    -moz-transition: all 0.4s ease-in-out
    -o-transition: all 0.4s ease-in-out
    -ms-transition: all 0.4s ease-in-out
    transition: all 0.4s ease-in-out

    top: 10px
    left: 10px
    box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8)

  .ch-info
    position: absolute
    width: 100px
    height: 100px
    border-radius: 50%

    -webkit-transition: all 0.4s ease-in-out
    -moz-transition: all 0.4s ease-in-out
    -o-transition: all 0.4s ease-in-out
    -ms-transition: all 0.4s ease-in-out
    transition: all 0.4s ease-in-out

    -webkit-transform-style: preserve-3d
    -moz-transform-style: preserve-3d
    -o-transform-style: preserve-3d
    -ms-transform-style: preserve-3d
    transform-style: preserve-3d

  .ch-info > div
    display: block
    position: absolute
    width: 100%
    height: 100%
    border-radius: 50%
    background-position: center center

    -webkit-backface-visibility: hidden
    -moz-backface-visibility: hidden
    -o-backface-visibility: hidden
    -ms-backface-visibility: hidden
    backface-visibility: hidden

  .ch-info .ch-info-back
    -webkit-transform: rotate3d(0,1,0,180deg)
    -moz-transform: rotate3d(0,1,0,180deg)
    -o-transform: rotate3d(0,1,0,180deg)
    -ms-transform: rotate3d(0,1,0,180deg)
    transform: rotate3d(0,1,0,180deg)
    background: #F2F2F2

  .ch-img-1
    background-image: url("frontpage/educational.png")

  .ch-img-2
    background-image: url("frontpage/community.png")

  .ch-img-3
    background-image: url("frontpage/elearning.png")

  .ch-info i
    color: $gray
    text-transform: uppercase
    letter-spacing: 0px
    font-size: 50px
    margin: -15px 15px 0
    padding: 40px 0 0 0
    height: 90px
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3)
    display: block

  .ch-info p
    color: $white
    padding: 10px 5px
    font-style: italic
    margin: 0 30px
    border-top: 1px solid rgba(255,255,255,0.5)

  .ch-info p a
    display: block
    color: $white
    color: rgba(255,255,255,0.7)
    font-style: normal
    font-weight: 700
    text-transform: uppercase
    font-size: 9px
    letter-spacing: 1px
    padding-top: 4px
    font-family: 'Open Sans', Arial, sans-serif

  .ch-info p a:hover
    color: #fff222
    color: rgba(255,242,34, 0.8)

  .ch-item:hover .ch-info-wrap
    box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8)

  .ch-item:hover .ch-info
    -webkit-transform: rotate3d(0,1,0,-180deg)
    -moz-transform: rotate3d(0,1,0,-180deg)
    -o-transform: rotate3d(0,1,0,-180deg)
    -ms-transform: rotate3d(0,1,0,-180deg)
    transform: rotate3d(0,1,0,-180deg)

  .text_2_info
    margin-top: 70px

    p
      float: center

  .text_1_info,
  .text_3_info
    margin-top: -50px
  .text_2_info,
  .text_3_info
    @media (max-width: $screen-xs-max)
      margin-top: 36px
  .text_1_info
    @media (max-width: $screen-xs-max)
      margin-top: 0px


#frontpage
  .entities_front
    width: 100%
    display: block
    margin-bottom: 40px
    float: left
    @media (max-width: $screen-xs-max)
      margin-bottom: 0

@media (min-width: 1751px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+16)
      display: block

@media (min-width: 1501px) and (max-width: 1750px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+14)
      display: block

@media (min-width: 1200px) and (max-width: 1500px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+12)
      display: block

@media (min-width: 992px) and (max-width: 1199px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+10)
      display: block

@media (min-width: 768px) and (max-width: 991px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+8)
      display: block

@media (min-width: 481px) and (max-width: 767px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+9)
      display: block

@media (max-width: 480px)
  .entities_front
    .box-item
      display: none
    .box-item:nth-of-type(-n+10)
      display: block
